.main-cont{
    .swiper{
        .swiper-container{
            width: 414px;
            height: 200px; 
            .img{
                width: 100%;
                height: 100%;
            } 
        }
    }
    // 小模块的样式
    .container{
        padding: 5px 15px 20px;
        .box1{
            width: 150px;
            height: 150px;
            background: url('../../assets/imgs/index-card-rank.png') rgba(21, 146, 204, 1) no-repeat -16px 24px;
            background-size: 121px 121px;
            font-family: PingFangSC-bold;
            // 今日排名
            .ranking{
                width: 80px;
                height: 28px;
                font-size:20px;
                color: rgba(0, 78, 115, 1);
                font-weight: 600;
                margin: 8px 14px;
            }
            // 排名
            .num{
                width: 48px;
                height: 112px;
                color: rgba(255, 255, 255);
                font-size: 50px;
                margin: 10px 0px 0px 25px;
            }
        }
        .box2{
            width: 212px;
            height: 150px;
            background: url('../../assets/imgs/index-card-sum.png') rgba(123, 203, 245, 1)  no-repeat 10px 20px;
            background-size: 110px 110px;
            // 累计打卡天数
            .clockIn{
                width: 160px;
                height: 28px;
                color: rgba(0, 81, 119, 1);
                font-size: 20px;
                font-family: PingFangSC-bold;
                font-weight: 600;
                margin: 8px 14px;
            }
            // 今日打卡
            .clockIn-box{
                width: 100px;
                height: 40px;
                text-align: center;
                line-height: 36px;
                color: rgba(0, 78, 115, 1);
                font-family: Arial;
                font-weight: 600;
                border-radius: 20px;
                border: 3px solid rgba(0, 81, 119, 1);
                margin: 34px 0px 0px 97px;
                cursor: pointer;
            }
            // 打卡成功
            .clocked {
                width: 100px;
                height: 40px;
                text-align: center;
                line-height: 36px;
                color: rgba(0, 78, 115, 1);
                font-family: Arial;
                font-weight: 600;
                border-radius: 20px;
                border: 3px solid #ddd;
                margin: 34px 0px 0px 97px;
                cursor: pointer;
                color:#ddd;
              }
            
        }
        .box3{
            width: 180px;
            height: 110px;
            background: url('../../assets/imgs/index-card-data.png');
            background-size: 100% 100%;
            // 运动数据
            .motionData{
                width: 64px;
                height: 22px;
                color: rgba(255, 255, 255, 1);
                font-size: 16px;
                font-family: PingFangSC-regular;
                margin: 12px 14px;
                font-weight: 600;
            }
        }
        .box4{
            width: 185px;
            height: 110px;
            font-family: PingFangSC-bold;
            background: url('../../assets/imgs/index-card-badge.png') rgb(157, 189, 227,1) no-repeat 6px 8px;
            background-size: 55% 90%;
            position: relative;
            .accumulate{
                width: 96px;
                height: 22px;
                color: rgba(0, 81, 119, 1);
                font-size: 16px;
                font-weight: 600;
                position: absolute;
                top: 12px;
                left: 14px;
            }
            .badge{
                width: 48px;
                height: 112px;
                color: rgba(0, 78, 115, 1);
                font-size: 80px;
                position: absolute;
                top: 10px;
                left: 110px;
            }
            .text{
                width: 18px;
                height: 25px;
                color: rgba(0, 81, 119, 1);
                font-size: 18px;
                font-weight: 600;
                position: absolute;
                bottom: 10px;
                right: 10px;
            }
        }
        .box5{
            width: 385px;
            height: 110px;
            font-family: PingFangSC-bold;
            font-weight: 600;
            font-size: 16px;
            padding: 13px 15px;
            .course{
                width: 64px;
                height: 22px;
                color: rgba(255, 255, 255, 1);
            }
        }
        .img1{
            background: url('../../assets/imgs/course-img04.jpg') no-repeat;
            background-size: 100% 200px ;
        }
        .img2{
            background: url('../../assets/imgs/course-img02.png') no-repeat;
            background-size: 100% 130px ;
        }
    }
}


